<template>
	<view class="zhuyin-item">
		<view class="zhuyin-item-pinyin" :style="'font-size:'+ fontSize+'px'">{{pinyin}}</view>
		<view class="zhuyin-item-hanzi" :style="'font-size:'+ fontSize+'px'">{{hanzi}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		props: {
			pinyin: String,
			hanzi: String,
			fontSize: {
				type: Number,
				default: 18
			}
		}

	}
</script>

<style scoped>
	.huyin-item {
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.zhuyin-item-pinyin {
		width: fit-content;
		display: flex;
		flex-direction: column;
	}

	.zhuyin-item-hanzi {
		display: flex;
		text-align: center;
		flex-direction: column;
	}
</style>
